<template>
    <view class="order-box">
        <div class="flex-content" v-for="item in list" :key="item">
            <div style="display: flex; margin: 5% 5%;align-items: center;">
                <text style="font-size: 16px;margin-right: 5%;margin-top: 2%;font-weight: bold;">我的订单</text>
                <!-- <div style="margin-left: auto;display: flex;align-items: center;margin-top: 3%;">
                    <span class="flex-link-font" @click="jumpTo('/packageA/pages/serOrderList/index')">查看所有的订单</span>
                    <image style="width:20px;height: 20px;"
                        src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                    </image>
                </div> -->
            </div>
            <div style="margin-top:-2%; border-bottom: 1px solid #e6e6e6;"></div>
            <div>
                <nut-grid :column-num="5" :border="false">
                    <nut-grid-item text="待接单" @click="jumpTo('/packageA/pages/serOrderList/index?tab=1')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172255_1.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="待服务" @click="jumpTo('/packageA/pages/serOrderList/index?tab=2')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172255.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="服务中" @click="jumpTo('/packageA/pages/serOrderList/index?tab=3')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172254_2.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="已完成" @click="jumpTo('/packageA/pages/serOrderList/index?tab=4')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172254_1.png">
                        </image>
                    </nut-grid-item>
                    <nut-grid-item text="待评价" @click="jumpTo('/packageA/pages/serOrderList/index?tab=5')">
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/05/172254.png">
                        </image>
                    </nut-grid-item>
                </nut-grid>
            </div>
        </div>
        <div class="flex-content">
            <nut-cell-group>
                <nut-cell :center="true" title="编辑" is-link @click="jumpTo('/packageA/pages/manage/settleIn')">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/07/09/144158.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
        </div>
        <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
    </view>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Cell, CellGroup } from '@nutui/nutui';
export default {
    components: {
        'nut-cell': Cell,
        'nut-cell-group': CellGroup
    },
    setup() {
        const state = reactive({
            address: '',
            list: [
                {
                    shop_number: 0
                }
            ],
            msg: '',
            show: false,
            type: 'text',
            cover: false,
        });
        onMounted(() => {

        })
        const chooseLocation = () => {
            Taro.chooseLocation({
                success: function (res) {
                    console.log(res)
                    state.address = res.address
                    const latitude = res.latitude
                    const longitude = res.longitude
                },
                fail: function (res) {
                    console.log(res, '获取地址失败');
                },
            })
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const showToast = (msg) => {
            state.msg = msg
            state.show = true
        }
        const loginOut = () => {
            Taro.showModal({
                title: '提示',
                content: '是否确认退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        Taro.clearStorage()
                        mitt.emit("hasLogin", false)
                    }
                }
            })
        }
        const callPhone = () => {
            Taro.makePhoneCall({
                phoneNumber: '110' //仅为示例，并非真实的电话号码
            })
        }
        return {
            ...toRefs(state), jumpTo, showToast, loginOut, callPhone, chooseLocation
        };
    }
};
</script>

<style lang="scss">
.nut-row {
    overflow: hidden;

}


.flex-content {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
    background-color: white;
}

.flex-link-font {
    font-size: 24px;
    color: #8a8a8a;
}

.order-box {
    padding-top: 15rpx;
    box-sizing: border-box;
    background: #F4F4F4;
    border-radius: 20px 20px 0 0;
    height: 1200rpx;
}
</style>